<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>微博用户信息管理</title>
    <script src="https://cdn.staticfile.org/vue/2.6.7/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.5.4/index.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.5.4/theme-chalk/index.css"/>
    <link rel="icon" href="favicon.ico"/>
</head>
<body scroll="no">
<h1 style="margin-top: 0px">微博用户信息管理</h1>
<div id="app">
    <template>
        <el-table :data="tableData" border style="width: 100%" height="82vh">
            <el-table-column fixed prop="id" label="id" width="120">
            </el-table-column>
            <el-table-column fixed prop="profile_image_url" label="image" width="80">
                <template slot-scope="scope">
                    <img :src="scope.row.profile_image_url" width="45" height="45"/>
                </template>
            </el-table-column>
            <el-table-column fixed prop="screen_name" label="screen_name" width="125">
            </el-table-column>
            <el-table-column prop="tabs[1].containerid" label="weibo containerid" width="150">
            </el-table-column>
            <el-table-column prop="followers_count" label="followers" width="90">
            </el-table-column>

            <el-table-column prop="description" label="description" width="600">
            </el-table-column>

            <el-table-column width="95" fixed="right">
                <template slot="header" slot-scope="scope">
                    <el-button type="primary" size="small" @click="addWeiBoUser()">添加</el-button>
                </template>

                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">Delete
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
    </template>
    <template>

        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20, 25]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </template>

</div>
<script>

    var v = new Vue({
        el: '#app',
        data: {
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: []

        },
        mounted: function () {
            this.fetchWeiboUserInfo(0, 10);
        },
        methods: {
            handleSizeChange(size) {
                this.fetchWeiboUserInfo(this.currentPage, size);
            },
            handleCurrentChange(num) {
                this.fetchWeiboUserInfo(num, this.pageSize);
            },

            fetchWeiboUserInfo(page, num) {
                const url = currentUrl(window) + WEIBO_USER_INFO_MAPPING + "s?page=" + (page - 1) + "&num=" + num;
                this.$http.get(url).then(function (response) {
                    if (response.status === 200) {
                        let responseData = response.body.data;
                        this.tableData = responseData.data;
                        this.total = responseData.total;
                        this.currentPage = responseData.currentPage + 1;
                        this.pageSize = responseData.pageSizes;
                    }
                });
            },
            addWeiBoUser() {
                let context = this;
                this.$prompt('请输入微博用户id', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\d{10}$/,
                    inputErrorMessage: '格式不正确'
                }).then(({value}) => {
                    context.$http.post(currentUrl(window) + WEIBO_USER_INFO_MAPPING, {
                        uid: value,
                        cover: true
                    }, {emulateJSON: true}).then(function (response) {
                        if (response.status === 200) {
                            console.log(response.body);
                            if (response.body.code !== 0) {
                                showWarmMsg(context, response);
                                return;
                            }
                            this.$message({
                                type: 'success',
                                message: '添加用户: ' + response.body.data.screen_name + '成功'
                            });
                            this.fetchWeiboUserInfo(context.currentPage, context.pageSize);
                        }
                    });

                }).catch(() => {
                });
            },
            handleDelete(index, row) {
                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete(currentUrl(window) + WEIBO_USER_INFO_MAPPING + "?uid=" + row.id).then(function (response) {
                        if (response.status === 200) {
                            this.tableData.splice(index, 1);
                        }
                    });
                }).catch(() => {
                });
            }
        }
    });

</script>
</body>
</html>